<template>
    <div class="sort">
        <img src="https://gw.alicdn.com/imgextra/i4/O1CN01GRrTAV1C7c9I5ykhS_!!6000000000034-2-tps-714-368.png_q90.jpg_.webp" alt="">
        <div class="box1 box" @click="funJhs">
            <div class="title">
                <h5>聚划算</h5>
                <p>品牌折扣</p>
            </div>
            <div class="imgBox">
                <div class="left">
                    <img src="https://gw.alicdn.com/tps/O1CN01DM6ioT22YVYDAoxET_!!6000000007132-0-yinhe.jpg_140x140q90.jpg_.webp" alt="">
                </div>
                <div class="right">
                    <img src="https://gw.alicdn.com/tps/O1CN01UkqcOM1aO9Gl7On79_!!6000000003319-0-yinhe.jpg_180x180q90.jpg_.webp" alt="">
                </div>
            </div>
        </div>
        <div class="box2 box" @click="funEvery">
            <div class="title">
                <h5>天天特卖</h5>
                <p>1元秒杀</p>
            </div>
            <div class="imgBox">

                <div class="left">
                    <img src="https://gw.alicdn.com/tps/O1CN01yeTT0Q1sEDo3YYSFB_!!6000000005734-0-yinhe.jpg_140x140q90.jpg_.webp" alt="">
                </div>
                <div class="right">
                    <img src="https://gw.alicdn.com/tps/O1CN01axSNVz1LUorQBHYgo_!!6000000001303-0-yinhe.jpg_180x180q90.jpg_.webp" alt="">
                </div>
            </div>
        </div>
        <div class="box3 box" @click="toGoodsPage">
            <div class="title">
                <h5>有好货</h5>
                <p>好口碑</p>
            </div>
            <div class="imgBox">

                <div class="left">
                    <img src="https://gw.alicdn.com/tps/O1CN01qJRTAE25TsM4lej8O_!!6000000007528-0-yinhe.jpg_140x140q90.jpg_.webp" alt="">
                </div>
                <div class="right">
                    <img src="https://gw.alicdn.com/tps/O1CN013vqOzt1QtcIyYBVQw_!!6000000002034-0-yinhe.jpg_180x180q90.jpg_.webp" alt="">
                </div>
            </div>
        </div>
        <div class="box4 box">
            <div class="title">
                <h5>每日好店</h5>
                <p>头条</p>
            </div>
            <div class="imgBox">

                <div class="left">
                    <img src="https://gw.alicdn.com/tps/O1CN01kKFInE1SaV3a9Sl0s_!!6000000002263-0-yinhe.jpg_140x140q90.jpg_.webp" alt="">
                </div>
                <div class="right">
                    <img src="https://gw.alicdn.com/tps/TB14WNehYr1gK0jSZFDSuv9yVXa.jpg_180x180q90.jpg_.webp" alt="">
                </div>
            </div>
        </div>
        <div class="lineOne"></div>
        <div class="linetwo"></div>
    </div>
</template>

<script>
export default {
    name:"playSort",
    methods:{
        funJhs(){
            this.$router.push("/TogetherPage").catch(err=>{})
        },
        funEvery(){
            this.$router.push("/everyday").catch(err=>{})
        },
        toGoodsPage(){
            this.$router.push("/GoodsPage").catch(err => { })
        }
    }
}
</script>

<style lang="scss" scoped>
    .sort {
        width: 7.16rem;
        height: 3.69rem;
        border-radius: 0.22rem;
        background: #fff;
        margin: 0 auto 0.1rem;
        overflow: hidden;
        position: relative;
    }
    .sort>img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 999;
        pointer-events: none;
    }
    .sort .box {
        width: 3.58rem;
        height: 1.85rem;
        float: left;
    }
    .sort .box1 .title {
       
        height: 0.35rem;
        display: flex;
        align-items: center;
        position: absolute;
        top: 0.14rem;
        left: 0.14rem;
    }
    .sort .box1 .title h5 {
        font-size: 0.28rem;
        
    }
    .sort .box1 .title p {
        width: 1.08rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background: #fe4200;
        color: #fff;
        font-size: 0.24rem;
        margin-left: 0.06rem;
    }
    .sort .box2 .title {
        
        height: 0.35rem;
        display: flex;
        align-items: center;
        position: absolute;
        top: 0.14rem;
        left: 3.68rem;
    }
    .sort .box2 .title h5 {
        font-size: 0.28rem;
        
    }
    .sort .box2 .title p {
        width: 1.08rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background: #ff4003;
        color: #fff;
        font-size: 0.24rem;
        margin-left: 0.06rem;
    }
    .sort .box3 .title {
        
        height: 0.35rem;
        display: flex;
        align-items: center;
        position: absolute;
        top: 1.96rem;
        left: 0.14rem;
    }
    .sort .box3 .title h5 {
        font-size: 0.28rem;
        
    }
    .sort .box3 .title p {
        width: 0.85rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background: #0090ea;
        color: #fff;
        font-size: 0.24rem;
        margin-left: 0.06rem;
    }
    .sort .box4 .title {
        
        height: 0.35rem;
        display: flex;
        align-items: center;
        position: absolute;
        top: 1.96rem;
        left: 3.68rem;
    }
    .sort .box4 .title h5 {
        font-size: 0.28rem;
        
    }
    .sort .box4 .title p {
        width: 0.6rem;
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        background: #ff9711;
        color: #fff;
        font-size: 0.24rem;
        margin-left: 0.06rem;
    }
    .sort .box .imgBox {
        display: flex;
        justify-content: space-around;
        width: 3.58rem;
        height: 1.85rem;
    }
    .sort .box .left img {
        width: 1.23rem;
        height: 0.94rem;
        margin-top: 0.65rem;
    }
    .sort .box .right img {
        width: 1.5rem;
        height: 1.59rem;
    }
    .sort .lineOne {
        width: 0.02rem;
        height: 3.43rem;
        background: #eeeeee;
        position: absolute;
        top: 0.12rem;
        left: 3.56rem;
    }
    .sort .linetwo {
        height: 0.02rem;
        width: 6.9rem;
        background: #eeeeee;
        position: absolute;
        top: 1.75rem;
        left: 0.11rem;
    }
</style>